<template>
	<view class="flex flex-wrap">
		<view class="flex align-center justify-center mb-3 position-relative" style="width: 230rpx;"
			v-for="item,index in imageList">
			<image :src="item" @click="preview(item)" class="bg-light rounded" mode=""
				style="width: 220rpx;height: 220rpx;"></image>
			<view @click="deletee(index)" class="flex align-center justify-center position-absolute text-white "
				style="width:50rpx;top:0px;height: 50rpx;right:0px;background: rgba(0, 0, 0, 0.5);">
				<text class="iconfont">&#xe620;</text>
			</view>
		</view>
		<view v-if="imageList.length<9" @click="chooseimage" class="flex align-center justify-center"
			style="width: 230rpx;">
			<view class="flex align-center justify-center bg-light rounded" style="width: 220rpx;height: 220rpx;">
				<text class="text-light-muted" style="font-size: 80rpx;">+</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			data: {
				type: Array,
				default: () => {
					return []
				}
			}
		},
		mounted() {
			this.imageList = this.data
		},
		data() {
			return {
				imageList: [],
			}
		},
		methods: {
			preview(item) {
				uni.previewImage({
					current: item,
					urls: this.imageList
				})
			},
			deletee(index) {
				uni.showModal({
					content: "是否删除图片？",
					success: (res) => {
						if (res.confirm) {
							this.imageList.splice(index, 1)
							this.$emit("deleteee", this.imageList)

						}

					}
				})
			},
			chooseimage() {
				uni.chooseImage({
					count: 9 - this.imageList.length,
					sizeType: ['compressed'],
					success: (res) => {
						this.imageList = [...this.imageList, ...res.tempFilePaths]
						console.log(this.imageList)
						this.$emit("upload", this.imageList)
					}
				})
			}
		}
	}
</script>

<style>
</style>
